<template>
<view class="setting-input-box h100 bg-white text-black">
  <form v-if="curKey === 'nickname' || curKey === 'profession'">
    <view class="cu-form-group border-bottom">
      <input :placeholder="inputPlaceHolder" name="input" @input="onInput"/>
    </view>
  </form>

  <form v-if="curKey === 'mobile'">
    <view class="cu-form-group border-bottom">
      <view class="title">原手机号</view>
      <input name="oldPhone" :value="userInfo.mobile" disabled/>
    </view>
    <security-code
      event="resetmobile"
      phoneTitle="新手机号"
      phonePlaceholder="请输入新手机号"
      smsCodeTitle="手机验证码"
      @onChange="getSecurityParams">
    </security-code>
  </form>

  <form v-if="curKey === 'gender'">
    <view class="cu-form-group border-bottom">
      <view class="title">性别</view>
      <picker mode="selector" @change="genderPickerChange" :range="genderPicker">
        <view class="picker">
          {{genderPicker[genderIndex]}}
        </view>
      </picker>
    </view>
  </form>
  
  <view class="flex flex-direction margin-tb-xl padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onConfirm">确认</button>
  </view>
</view>
</template>

<script>
import securityCode from '@/components/security-code/security-code'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'profile-edit', // 个人设置-输入方式更改
  components: { securityCode },
  data () {
    return {
      curKey: 'mobile',
      navTitleList: {
        mobile: '更换手机号',
        nickname: '更改昵称',
        profession: '更改职业',
        gender: '性别'
      },
      genderPicker: ['女', '男', '未知'],
      genderIndex: 2,
      smsText: '获取验证码',
      inputPlaceHolderList: {
        mobile: '',
        nickname: '请输入新昵称',
        profession: '请输入您的职业'
      },
      inputValue: '',
      new_mobile: '',
      code: ''
    }
  },
  computed: {
    ...mapState([
      'GENDER_LIST'
    ]),
    ...mapGetters([
      'userInfo'
    ]),
    inputPlaceHolder() {
      return this.inputPlaceHolderList[this.curKey] || '请输入'
    },
    profileParams() {
      let params = {}
      switch (this.curKey) {
        case 'nickname':
          params.nickname = this.inputValue
          break;
        case 'profession':
          params.profession = this.inputValue
          break;
        case 'gender':
          params.gender = this.genderIndex
          break;
        case 'mobile':
          params.mobile = this.userInfo.mobile
          params.new_mobile = this.new_mobile
          params.code = this.code
          break;
      }
      return params
    }
  },
  onLoad() {
    this.curKey = this.$Route.query.key || 'nickname'
    let navTitle = this.navTitleList[this.curKey]
    this.$store.dispatch('setPageTitle', navTitle)
    this.genderIndex = this.userInfo.gender
  },
  methods: {
    onConfirm() {
      this.editUserProfile()
    },
    /** 修改用户个人信息 */
    editUserProfile() {
      this.$api.editUserProfile(this.profileParams).then(async res => {
        if (!res) return
        const resData = res.data
        const userinfo = resData.userinfo
        this.$store.commit('SET_USER_INFO', userinfo)
        await this.$showSuccessToast('修改成功!')
        this.gotoPrevPage()
      })
    },
    getSecurityParams(params) {
      this.new_mobile = params.mobile
      this.code = params.smsCode
    },
    onInput(e) {
      this.inputValue = e.detail.value
    },
    genderPickerChange(e) {
      this.genderIndex = e.detail.value
    },
    gotoPrevPage() {
      this.$Router.back()
    }
  }
}
</script>

<style lang="less">
.cu-form-group .title { // 统一form内的title宽度
  min-width: calc(4em + 30px);
}
</style>
